ㅍ

01 프로젝트 개요

02 프로젝트 팀 구성 및 역할

03 프로젝트 수행 절차 및 방법

04 프로젝트 수행 결과

05 자체 평가 의견

#트렌드 #여행 #스탬프투어

#멋쟁이

OpenAPI활용GPS인증 대구 명소 스탬프 투어 앱 'DanDi'구현

단디는 '제대로, 똑바로＇의 방언으로 직접 찾아가 스탬프를 찍는 기존의 스탬프 투어와 다르게

어플을 제작하여 QR인증을 통하여 대구를 방문하는 관광객들이 제대로 대구 명소를 즐길 수

있도록 하기 위해 제작

01 프로젝트 개요

주제

기획의도

OpenAPI활용GPS인증 대구명소 투어 앱 'DanDi‘ 구현

코로나19 이후로 해외여행보다는

국내여행 선호도가 높아짐

GPS 활용하여 주변 관광지 홍보

오락 요소를 넣어 흥미 유발

지역경제 활성화 및 스탬프 투어를 활용한

기존의 관광지 홍보

대구로 관광객을 유치함으로 지역 경제 활성화

Persona

이름 박연진

직업 인플루언서

성격 여행 SNS계정 운영하는 인플루언서

최신 유행에 민감하고, 편한 것을 추구

흔한 것 보다 독특하고 특이한 것 선호

“기존의 아날로그 스탬프 투어는 번거롭고 불편해!

이런 점이 보완된 스탬프 투어 어플을 만들 수 없을까?”

정형화된 스탬프 투어로 특색이 없다.

기존의 스탬프 투어는 종이를 들고 다녀야 해서

잃어버릴까 불안하고 불편하다.

현재 위치를 알 수 없어 다음 목적지까지의 최적 경로를

찾기 힘들다.

여행지의 명소를 하나하나 찾아야하는 번거로움이 있다.

스탬프 투어 완료 후 적절한 보상이 없어 참여 동기가

부족하다.

01 프로젝트 개요

프로젝트 주제 및 기획 의도

현업 이슈

문제

-타지역의 경우 지역 경제를 살리기 위해 스탬프 투어 앱 활성화

-대구 지역은 스탬프 투어 앱 부재

-코로나로 인해 지역 경제가 침체되어 있음

-대구 스탬프 투어는 한구역에 한정 되어있음

-대구 스탬프 투어는 오프라인으로만 구성되어 있음

-오프라인 스탬프 투어는 스탬프 팜플렛 분실 우려가 있음

01 프로젝트 개요

{

프로젝트 기술서

프로젝트 구현 내용 및

컨셉

훈련 내용 관련 기술

-지역경제 활성화 및 스탬프 투어를 활용한 기존의 관광지 홍보

-포인트 시스템을 도입하여 성취감과 흥미 유발

-하이브리드앱 구현

-GPS API 기술

-데이터베이스 설계 및 구현

-형상관리 도구 활용 및 앱 배포

01 프로젝트 개요

개발 환경(개발 언어 및 툴)

개발툴 개발 언어

01 프로젝트 개요

워크플로우

시작 대구 명소 6곳

해당지역 스탬프

스탬프 6개 수집 완료

포인트적립/교환 종료

01 프로젝트 개요

플로우차트

시작

로그인

회원가입

홈

지도

QR인증

스탬프

메뉴

이용안내

어플소개

쿠폰교환

마이페이지

고객센터

로그아웃

01 프로젝트 개요

02 프로젝트 팀 구성 및 역할

팀 구성 및 역할

최윤석 남예린 이혜민 정연진 방선연

팀장 / 퍼블리싱 UI/UX 디자인 퍼블리싱 UI/UX 디자인 프론트엔드

프론트엔드 백엔드

개발기간

03 프로젝트 수행 절차 및 방법

04 프로젝트 수행 결과

UI/UX 설계(와이어프레임)

스플레시 로그인 창 회원가입 창 마이페이지

04 프로젝트 수행 결과

UI/UX 설계(와이어프레임)

둥근 아이콘 클릭시 이용안내 클릭시메인 창

04 프로젝트 수행 결과

UI/UX 설계(와이어프레임)

지도 스탬프 위치 지도 나의 위치 지도

04 프로젝트 수행 결과

UI/UX 설계(와이어프레임)

스탬프 창 QR 카메라 QR 촬영시 쿠폰교환 클릭시

04 프로젝트 수행 결과

UI/UX 디자인(스타일 가이드)

04 프로젝트 수행 결과

UI/UX 디자인(프로토타입)

회원가입 창로그인 창스플레시 마이페이지

04 프로젝트 수행 결과

UI/UX 디자인(프로토타입)

Dandi란? 클릭시둥근 아이콘 클릭시메인 창 이용안내 클릭시

04 프로젝트 수행 결과

UI/UX 디자인(프로토타입)

지도보기 클릭시포인트 클릭시

지도 창 나의 위치 확인 클릭시

04 프로젝트 수행 결과

UI/UX 디자인(프로토타입)

QR 스캔시카메라 창쿠폰 창 QR 스캔 성공시 쿠폰 교환 클릭시

04 프로젝트 수행 결과

하이브리드 앱 구현

1. Router를 이용해 페이지 분할

-React

04 프로젝트 수행 결과

하이브리드 앱 구현

2. NavLink를 이용해 해당 페이지로 이동 설정

-React

04 프로젝트 수행 결과

OpenAPI 기술 활용 (GPS API활용)

1. 카카오 맵 API 사용을 위한 KEY를 설정

2. API 데이터 호출

-javascript, axios, ajax, json

04 프로젝트 수행 결과

3. API 호출로 가져온 데이터 location_list에 저장

4. geolocation API 사용하여 현재 위치 불러오기

OpenAPI 기술 활용 (GPS API활용)

-javascript, axios, ajax, json

04 프로젝트 수행 결과

5. 고객이 클릭한 장소 위도, 경도를 저장하여 지도 보여주기

OpenAPI 기술 활용 (GPS API활용)

-javascript, axios, ajax, json

04 프로젝트 수행 결과

1. MySQL을 활용하여 회원,

인증장소 목록과 장소와 관련된

힌트 목록을 불러올 수 있는 hint

데이터베이스 설계 및 구현 (ER 다이어그램)

-javascript, mysql

member

◆

INT

VARCHAR(255)

pass

VARCHAR(255)

point

INT

location

◆

INT

name

VARCHAR(45)

code

VARCHAR(45)

Latitude

FLOAT

longitude

FLOAT

record

◆

INT

member_no

INT

location_no

INT

datetime

TIMESTAMP

hint

◆

INT

location_no

INT

address

VARCHAR(50)

description

VARCHAR(255)

picture_path

VARCHAR(255)

04 프로젝트 수행 결과

1. 로그인 버튼 클릭 시

데이터베이스 설계 및 구현

(회원가입 및 로그인 기능 구현)

-javascript, mysql, node.js

2. 로그인 api로 값을 보내주는 함수 실행

04 프로젝트 수행 결과

3. 로그인을 위한 login함수 실행

데이터베이스 설계 및 구현

(회원가입 및 로그인 기능 구현)

-javascript, mysql, node.js

04 프로젝트 수행 결과

1. 회원 가입을 위한 register 함수 실행

-bycrypt를 사용하여 패스워드 암호화하여 DB에 저장

데이터베이스 설계 및 구현

(회원가입 및 로그인 기능 구현)

-javascript, mysql, node.js

04 프로젝트 수행 결과

1. 작업이 모두 끝난 리액트 파일을 build

2. Build파일을 github에 push한다

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

04 프로젝트 수행 결과

3. Netlify애 깃허브를 연동하여 웹에 배포

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

04 프로젝트 수행 결과

4. 배포가 완료되면 도메인 주소를 보기 좋게 변경

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

04 프로젝트 수행 결과

5. 변경된 도메인 주소

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

04 프로젝트 수행 결과

6. 안드로이드 스튜디오를 이용해 앱 만들기

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

7. Netlify에서 만들어진 도메인 주소를

PageInfo 파일에 작성

8. 어플 아이콘 만들기

04 프로젝트 수행 결과

9. 스플레시 화면 넣기

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

04 프로젝트 수행 결과

10. Apk 어플로 빌드하기

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

04 프로젝트 수행 결과

11. Key가 지정된 위치에 없으면

apk가 생성되지 않음

key위치를 모르겠다면 새로 만들어야함

형상관리 도구 활용 및 앱 배포

-Github, Netlify, Android Studio

12. 해당 위치에 apk가 생성됨

-https://dandi21.netlify.app

-Te st I D / P W : u s er 1 / 1 2 34